<template>
	<div id="home">
		<div class="headEdit clearfix">
			<el-button type="primary" @click="newcreate = true" class="btnleft"><i class="iconfont icon-audience"></i>新建受众</el-button>
			<el-autocomplete
		      class="inline-input"
		      v-model="serchAudienceName"
		      :fetch-suggestions="querySearchAsync"
		      placeholder="请输入受众名称"
		      @select="handleSelect"
		      @keyup.enter.native='searchName'
		    ></el-autocomplete>
		</div>
		<el-table :data="tableShowData"  class="tableData" v-show="showTable">
			<el-table-column label="操作" width="160">
				<template scope="scope" >
					<span @click="handleEdit($event,scope)"><i class="iconfont icon-edit icon-action" style="cursor: pointer;"></i></span>
					<span @click="handleDel(scope,
						$event)" class="handleDel"><i class="iconfont icon-dustbin icon-actionn" style="cursor: pointer;"></i></span>
				</template>
			</el-table-column>
			<el-table-column label="受众名称"  width="310" >
				<template scope="scope" >
					<div @click="($event)=>{
							handleEdit($event,scope);
						}">
						<span class="words">{{ scope.row.name }}</span>
						
						<div class="input_text" style="display:none">
							<input :id="scope.row.id" class="el-input__inner"  type="text" :value="scope.row.name" @focus="focusEv(scope,$event)" @blur="($event)=>{
								bluring($event,scope);
								}" autocomplete="off"/>
							<i class="el-input__icon el-icon-close" @click="clearContext(scope,$event)"></i>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="受众类型" width="170" prop='type'>
				<template scope="scope" >
					<div v-show="scope.row.showType" style="font-size: 14px">自定义受众</div>
					<span v-show="scope.row.showType" class="circleType"></span>
					<span :style="{fontSize:scope.row.showType==true ? '12px' : '14px'}">{{ scope.row.type}}</span>
			    </template>
			</el-table-column>
			<el-table-column label="预计覆盖用户" width="158" prop='reach'></el-table-column>
			<el-table-column label="可用性" width="214">
				<template scope="scope">
				<div style='display:inline-block;float: left;'>
                    <div class="circle_ableBox">
                        <span class="circle_able" :style="{background:scope.row.status.indexOf('正常')!=-1 ? '#0686f9' : '#FF3526'}"></span>
						<span class="circle_ableText"   v-text="scope.row.status"></span>
                    </div>
					<span :style='{display:"block"}' v-text="scope.row.statusDesc"  class="able_redView" ></span>
				</div>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" prop='gmtCreate' width="185"></el-table-column>
		</el-table>
		<div class="tableClass">
			<el-table v-show='showTableEmpty' empty-text=" ">
			    <el-table-column label="操作" width="160"></el-table-column>
			    <el-table-column label="受众名称" width="310"></el-table-column>
			    <el-table-column label="受众类型" width="170"></el-table-column>
			    <el-table-column label="预计覆盖用户" width="158"></el-table-column>
			    <el-table-column label="可用性" width="214"></el-table-column>
			    <el-table-column label="创建时间" width="185"></el-table-column>
			</el-table>
			<div class="empty-content1" v-show="showTableEmpty">
	            <div style="width: 100%">
	                <img class="tab-img" src="../../assets/img/no-data.png">
	            </div>
	            <span>暂无数据</span>
	        </div>
        </div>
		<loading :customClass="customLoading" v-show="delShowQ"/>
		<div class="dialog-wrapper-messageBox" v-if="dialogVisible">
			<div class="el-dialog-messageBox"  ref="perDialog">
				<div class="dialog-body">
					<el-icon name="warning"></el-icon>
					<span>确定删除此受众?</span>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="sureHandleDel()">确 定</el-button>
	  		    </div>
				<span class="arrow-down"></span>
			</div>
		</div>
		<loading :customClass="customLoading" v-show="!showTable && !showTableEmpty"/>
		<el-dialog title="新建受众" v-model="newcreate"  class="newcreate Audience">
			<div><el-button type="primary" @click="custom = true" class="custom"><i class="iconfont icon-customer-file"></i>客户文件受众</el-button></div>
			<div><el-button type="primary" @click="mainpage=true"><i class="iconfont icon-homepage-interaction"></i>主页互动受众</el-button></div>
			<div><el-button type="primary" @click="similar=true"><i class="iconfont icon-similar"></i>类似受众</el-button></div>
			<span slot="footer" class="dialog-footer">
	        	<el-button @click="newcreateAudience()" class="hoverinput2">关闭</el-button>
	        </span>
		</el-dialog>
		<el-form :model="CruleForm" :rules="Crules" ref="CruleForm" class="demo-CruleForm">
			<el-dialog title="新建客户文件受众" v-model="custom"  class="custom_new_create Audience"  @close="cancelCustomAudience('CruleForm')">
				<el-form-item  prop="Cname">
					<div class="customName1">
						<span>受众名称<span style="color:red;">*</span>:</span>
						<el-input v-model="CruleForm.Cname" @blur="Trim()"></el-input>
					</div>
				</el-form-item>
				<el-form-item  prop="Cname1">
					<div class="customType1">
						<span>受众类型<span style="color:red;">*</span>:</span>
						<el-select v-model="CruleForm.Cname1" placeholder="选择类型" style="margin-left:10px">
							<el-option
									v-for="(item,index,key) in options"
	                                :key="index"
									:label="item.label"
									:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-form-item>
				<el-form-item  class="downloadModel">
					<div class="customModel clearfix">
						<a href="/example_audience_file.csv" download="example_audience_file.csv"><span style="color: #2F88FF;margin-left: 5px">下载模板</span></a>
	                </div>
	            </el-form-item>
	            <el-form-item class="uploadText">
					<div class="dialog_text">
						<span>文件<span style="color:red;">*</span>:</span>
						<label class="ui_button" for="xFile" v-model="CruleForm.Cname3">选择文件</label>
						<input class="uploadUserAvatar" id="xFile"  type="file" @change="uploadUserAvatarChange" accept=".csv" ref="userAvatar"/>
						<span class='filename'></span>
					</div>
				</el-form-item>
				<div class="error-msg"></div>

				<span slot="footer" class="dialog-footer">
					<el-button @click="cancelCustomAudience('CruleForm')">取消</el-button>
					<el-button v-if="!nextC" @click="submitUpload('CruleForm')">保存</el-button>
					<el-button v-else :loading="true">保存中</el-button>
		        </span>
			</el-dialog>
		</el-form>
		<el-form :model="MruleForm" :rules="Mrules"  ref="MruleForm" class="demo-MruleForm">
			<el-dialog title="新建主页互动受众" v-model="mainpage"  class="custom_new_create Audience similar" @close="cancelMainAudience('MruleForm')">
				<el-form-item  prop="Mname">
					<div class="dialog_namePage">
	                    <span>受众名称<span style="color:red;">*</span>:</span>
	                    <el-input v-model="MruleForm.Mname" @blur="Trim()"></el-input>
	                </div>
                </el-form-item>
                <el-form-item  prop="Mname1">
					<div>
		                <span style="margin-left:27px;display:inline-block;float:left">主页<span style="color:red;">*</span>:</span>
						<el-select v-if="mainpage" placeholder="请选择" style="margin-bottom: 0;margin-left:10px" v-model="MruleForm.Mname1">
							<el-option
									v-for="(item,index,key) in options1"
									:key="index"
									:label="item.name"
									:value="item.id"
									>
							</el-option>
						</el-select>
					</div>
				</el-form-item>
				<el-form-item  prop="Mname2">
					<div>
	                    <span style="margin-left:27px;display:inline-block;float:left">包括<span style="color:red;">*</span>:</span>
						<el-select v-model="MruleForm.Mname2" placeholder="请选择" style="margin-left:10px">
							<el-option
									v-for="(item,index,key) in options2"
									:key="index"
									:label="item.label"
									:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-form-item>
				<el-form-item  class="Mslider">
					<span style="display:inline-block;float:left;margin-left:27px">过去<span style="color:red;">*</span>:&nbsp;&nbsp;</span>
					<div class="slider_parent">
						<el-slider v-model="valuesize1"  :format-tooltip="formatTooltip1" :min="0" :max="365"  @change='change(valuesize1)'></el-slider>
					</div>
				</el-form-item>
				<span slot="footer" class="dialog-footer" >
					<el-form-item >
			          	<el-button @click="cancelMainAudience('MruleForm')">取消</el-button>
			          	<el-button v-if="!nextM" @click="saveCreatePageAudience('MruleForm')">保存</el-button>
			          	<el-button v-else :loading="true" >保存中</el-button>
		          	</el-form-item>
		      </span>
			</el-dialog>
		</el-form>	
		<el-form :model="SruleForm" :rules="Srules" ref="SruleForm" class="demo-SruleForm">
			<el-dialog title="新建类似受众" v-model="similar"  class="custom_new_create Audience similar" @click="cancelSimilarAudience('SruleForm')">
				<el-form-item prop="Sname">
					<div>
						<span style="margin-left:35px;display:inline-block;float:left">来源<span style="color:red;">*</span>:</span>
						<el-select v-model="SruleForm.Sname" placeholder="选择自定义受众或主页" style="margin-left:10px">
						        <el-option
							      v-for="(item,index) in origin"
							      :key="item.value"
							      :label="item.name"
							      :value="item.id">
							        <span class="origin_left" style="float: left;width:150px;overflow: hidden;display: inline-block;margin-right:20px;text-overflow: ellipsis;" >{{ item.name }}</span>
						      		<span style="float: right; color: #8492a6; font-size: 13px" v-text="item.type ? '自定义受众' : '主页'"></span>
							    </el-option>
						</el-select>
					</div>
				</el-form-item>
				<div class="contryList">
					<el-form-item >
					    <span style="display:inline-block;float:left">国家/地区<span style="color:red;">*</span>:</span>
						<el-select v-model="SruleForms1" multiple filterable style="margin-left:10px" placeholder="请选择国家/地区" @change="changeCountry(SruleForms1)">
							<el-option
							  v-for="item in diqu"
							  :key="item.value"
							  :label="item.name"
							  :value="item.code">
							    <el-popover placement="right" width="200" trigger="hover" > 
							    	<div style="margin-bottom: 10px;">
										<span style="font-weight: bold;font-size: 14px;color:#4b4f56;">{{inputValue}}</span>
										<span>	用户</span>
									</div>
									<div style="margin-bottom: 10px;">
										<span style="font-weight: bold;font-size: 14px;color:#4b4f56;">国家/地区</span>
										<span style="font-size: 14px;">	&gt; </span>
										<span>{{contry}}</span>
									</div>
									<div>
										<span style="font-weight: bold;font-size: 14px;color:#4b4f56;">描述  : </span>
										<span>定位{{contry}}的所有用户</span>
									</div>	
								    <span slot="reference" @mouseenter='showDiv(item)' style='display:inline-block;height:26px;width:100%;position: relative;top:-9px;padding-top: 10px;' @mouseleave='inputShow=false'>{{item.name}}</span>
								</el-popover>
							</el-option>	
						</el-select>
						<span class="el-form-item__error1" ref="cflag">请选择国家/地区</span>
					</el-form-item>
				</div>
				<el-form-item class="Slider">
					<div><span>&nbsp;受众规模<span style="color:red;">*</span>:&nbsp;&nbsp;</span>
						<div class="slider_parent">
							<el-slider v-model="valuesize" :format-tooltip="formatTooltip" :step="0.1" @change='changePercent(valuesize)' ></el-slider>
							<ul>
								<li v-for="list in ['<span>0</span>1',2,3,4,5,6,7,8,9,10]" v-html="list"></li>
							</ul>
						</div>
						<span class="percent">%国家/地区人口</span>
					</div>
				</el-form-item>
				<span slot="footer" class="dialog-footer">
					<el-form-item>
			          	<el-button @click="cancelSimilarAudience('SruleForm')">取消</el-button>
			          	<el-button v-if="!nextS" @click="saveLookAlikeAudience('SruleForm')">保存</el-button>
			          	<el-button v-else :loading="true" >保存中</el-button>
			        </el-form-item>  	
		        </span>
			</el-dialog>
		</el-form>
	    <el-pagination 
	    	v-show="showTable"
	    	class="pagination"
	    	@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[10, 20, 50]"
			:page-size="val"
			layout="prev, pager, next, sizes, jumper"
			:total="allDataLength">
	    </el-pagination>
	</div>
</template>
<script>
    import Vue from 'vue'
    import loading from '~/components/loading.vue'
    import {Table,TableColumn,Icon,Button,Tag,Popover,Dialog,Input,Select,Option,Slider,Autocomplete,Form,FormItem,Message,Pagination} from 'element-ui'
    import {mapGetters} from 'Vuex'
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Icon)
    Vue.use(Button)
    Vue.use(Tag)
    Vue.use(Popover)
    Vue.use(Dialog)
    Vue.use(Input)
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(Slider)
    Vue.use(Autocomplete)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Pagination)
    export default {
        data() {
            return {
            	delShowQ:false,
            	nextC:false,
            	nextM:false,
            	nextS:false,
            	currentPage: 1,
      	  		tableShowData: [],
            	everyPageStartNums: 0,
            	everyPageEndNums:10,
            	allDataLength: 0,
            	val: 10,
            	origin:[],
            	diqu:[],
            	customLoading:'top:550px',
            	showTableEmpty:false,
                showTable:false,
                tableData:[],
                listData:[],
                countryList:[],
                cflag:false,
            	SruleForms1:[],
                SruleForm:{
            		Sname:'',
            		Sname2:''
            	},
            	Srules:{
            		Sname:[
            		  { required:true,message:'请选择来源',trigger:'change' }
            		],
            		Sname2:[
            		   { required:true,message:'请选择受众规模',trigger:'change' }
            		]
            	},
            	CruleForm:{
            		Cname:'',
            		Cname1:''
            	},
            	Crules:{
            		Cname:[
            		  { required:true,message:'请输入受众名称',trigger:'blur'},
            		  { max:50,message:'受众名称过长，请修改',trigger:'blur' }
            		],
            		Cname1:[
            		  { required:true,message:'请选择受众类型',trigger:'change' }
            		]
            	},
            	MruleForm:{
            		Mname:'',
            		Mname1:'',
            		Mname2:''
            	},
            	Mrules:{
            		Mname:[
            		  { required:true,message:'请输入受众名称',trigger:'blur'},
            		  { max:50,message:'受众名称过长，请修改',trigger:'blur' }
            		],
            		Mname1:[
            		   { required:true,message:'请选择主页',trigger:'change' }
            		],
            		Mname2:[
            		   { required:true,message:'请选择包括',trigger:'change' }
            		]
            	},
                options: [
//                  {
//                      label: 'Facebook user id',
//                      value: 'USERID'
//                  },
                    {
                        label: '电话号码',
                        value: 'PHONE'
                    },
                    {
                        label: '邮箱',
                        value: 'EMAIL'
                    }
                ],
                options1: [],
                options2: [
                    {
                        label: '与主页互动的所有人',
                        value: 'page_engaged'
                    },
                    {
                        label: '任何访问过主页的用户',
                        value: 'page_visited'
                    },
                    {
                        label: '与任意帖子或广告互动的用户',
                        value: 'page_post_interaction'
                    },
                    {
                        label: '点击任意行动号召的用户',
                        value: 'page_cta_clicked'
                    },
                    {
                        label: '向主页发送消息的用户',
                        value: 'page_messaged'
                    } ,
                    {
                        label: '收藏主页或主页贴的用户',
                        value: 'page_or_post_save'
                    }

                ],
                value6:'',
                fileName:'',
                disY:0,
                disX:0,
                contry:'',
                valuesize:0,
                valuesize1:0,
                dialogVisible: false,
                currentIndex: 0,
                defaultContent: "",
                newcreate:false,
                custom: false,
                cfilenameEmpty:'',
                mainpage:false,
                similar:false,
                managerIndex: 2,
                serchAudienceName:"",
                restaurants:[],
                inputValue:'',
                inputShow:false,
				imgFlag:'contentNull',
				clearContentFlag: false,
				uploadAlready:false,
				mainSliderArd:false,
				similarSliderArd:false,
				quickFlag:true,
				options5: [{
		          value: 'HTML',
		          label: 'HTML'
		        }, {
		          value: 'CSS',
		          label: 'CSS'
		        }, {
		          value: 'JavaScript',
		          label: 'JavaScript'
		        }],
		        value10: []
		            }
		        },
        methods: {
        	handleSizeChange (val) {//分页
			  this.val = val
			  this.currentPage=1
			  this.tableDataUpdate()
		    },
		    handleCurrentChange (val) {
		      this.currentPage = val
			  this.tableDataUpdate()
		    },
			tableDataUpdate () {
			  this.everyPageEndNums = this.val*this.currentPage
			  this.everyPageStartNums = this.val*(this.currentPage-1)	  
			  this.tableShowData = this.tableData.slice(this.everyPageStartNums,this.everyPageEndNums)
			},
        	Trim(){//去除空格的验证     		
        		this.MruleForm.Mname=this.MruleForm.Mname.replace(/(^\s*)|(\s*$)/g, "");  
        		this.CruleForm.Cname=this.CruleForm.Cname.replace(/(^\s*)|(\s*$)/g, "");  
        	},
        	uploadUserAvatarChange(){//上传文件
        		if(!document.querySelector(".filename").innerHTML){
	        		this.uploadAlready=true;
	        	    let file=this.$refs.userAvatar.files[0]  
	        	    let filename=this.$refs.userAvatar.files[0].name;
	        	    document.querySelector(".filename").innerHTML=filename;
        	    }else{
        	    	Message.error('每次创建受众只能上传一次文件')
        	    }
        	},
            loadAll(){//模糊搜索受众名称
            	this.$store.dispatch("getListAudience").then(res=>{
            		if(res && res.data.success==true){
		      		    for(let i=0,len=res.data.data.length;i<len;i++){
		      		    	this.listData[i]={};
		      		    	this.listData[i].value=res.data.data[i].name;
		      		    }
	      		    }
	    		}).catch((error) => {})
            	return this.listData
            },
		    querySearchAsync(queryString, cb) {
		        var restaurants = this.restaurants;
		        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
		        cb(results);
		    },
			createFilter(queryString) {
		        return (restaurant) => {
		          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
		        };
		    },
			handleSelect(item){//搜索受众
				let serchAudienceName=this.serchAudienceName.replace(/(^\s*)|(\s*$)/g, "");
				this.$store.dispatch("getListAudience",{
					name:this.serchAudienceName
				}).then(res=>{
				    if(res && res.data.success==true){
				    	var list=res.data.data
						for(let i=0,len=res.data.data.length;i<len;i++){
					    	list[i].flag=true;
					    	list[i].showType=false;
					    	list[i].gmtCreate=this.format(list[i].gmtCreate);
	                        list[i].type=this.ChineseTypeAudience(list[i].type);
	                        list[i].reach=this.toThousands(list[i].reach)
	                        if(list[i].status=='EXIST'){
		                       list[i].status='正常'
		                    }
	                        if(list[i].type=='主页互动受众' || list[i].type=='客户文件受众'){
		                        list[i].showType=true;
		                    }
						}
						this.tableData=res.data.data;
						this.tableShowData=res.data.data;
						this.allDataLength=res.data.data.length;//搜索显示数据长度
						this.tableDataUpdate()
						if(this.tableData.length==0){
		      		    	this.imgFlag='searchNull';
		      		    	Message.error('没有符合要求的受众');
			      		}
					}
				}).catch((error) => {})	

			},
			searchName(){
				this.handleSelect();
			},		
			getIpt(e,scope){
                let input = document.getElementById(scope.row.id)
                return input;
			},
            handleEdit(e,scope) {//编辑
                setTimeout(() => {
					var parentIptNode = this.getIpt(e,scope).parentNode.parentNode;
					var words = parentIptNode.querySelector('.words');
					var iptTxt = parentIptNode.querySelector('.input_text');
					
					words.style.display = 'none';
					iptTxt.style.display = 'block';		
                    this.defaultContent = scope.row.name; 
                    this.getIpt(e,scope).focus();
                },100);
            },
			focusEv(scope,e){
			},
            bluring(e,scope) {//失去焦点
				setTimeout(()=>{
					if(this.clearContentFlag){
						let input =	this.getIpt(e,scope)
						input.focus();
						this.clearContentFlag = false;
					}else{
						var parentIptNode = this.getIpt(e,scope).parentNode.parentNode;
						var words = parentIptNode.querySelector('.words');
						var iptTxt = parentIptNode.querySelector('.input_text');
						
						words.style.display = 'block';
						iptTxt.style.display = 'none';

						var index = scope.$index;
						let v = this.getIpt(e,scope).value.replace(/(^\s*)|(\s*$)/g, "");
						let onlyV=this.tableData[index].name.replace(/(^\s*)|(\s*$)/g, "");
						
						var name = v == '' ? this.tableData[index].name.replace(/(^\s*)|(\s*$)/g, "") : this.getIpt(e,scope).value.replace(/(^\s*)|(\s*$)/g, "");
						this.getIpt(e,scope).value = name;
						
						if(name.length>50){
							Message.error('受众名称过长，请修改');
							name=name.substring(0,50)
							words.innerHTML = name;
							this.getIpt(e,scope).value=name;
						}
						else if(this.tableData[index].name!=this.getIpt(e,scope).value && name!= this.tableData[index].name){//判断编辑内容是否改动
							words.innerHTML = name;
							this.getIpt(e,scope).value = name;
							var typeName=this.tableData[index].type;//受众类型
							var facebookId=this.tableData[index].id;//facebookId
							if(typeName=="主页互动受众"){
								var url="getUpdatePageAudience"
							}else if(typeName=="保存受众"){
								var url="getUpdateSavedAudience"
							}else if(typeName=="类似受众"){
								var url="getUpdateLookAlikeAudience"
							}else if(typeName=="客户文件受众"){
								var url="getUpdateCustomAudience"
							}
							for(let i=0;i<this.tableData.length;i++){
								if (name==this.tableData[i].name && typeName==this.tableData[i].type){
									Message.error('已有相同受众名称')
									words.innerHTML=onlyV;
									this.getIpt(e,scope).value=onlyV;
									return ;
								}
							}
							this.$store.dispatch(url,{
								id:facebookId,
								name:name
							}).then(res=>{
								if(!res){
									words.innerHTML = onlyV;
									this.getIpt(e,scope).value = onlyV;
								}
								if(res && res.data.success==true){
									this.bluringSuccess()
								}else{
									words.innerHTML = onlyV;
									this.getIpt(e,scope).value = onlyV;
									Message.error(res.data.message)
								}
							}).catch((error) => {})	
						}
					}					
				},500)   
            },
            bluringSuccess(){
            	this.getListAudience();
				this.showOrigin();//更新来源数据
				this.loadAll();//更新搜索受众名称
				Message.success('替换受众成功')	
            },
            handleDel(scope,e) {//删除
            	let scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            	let scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
            	this.disY=e.clientY+scrollTop-e.offsetY;
            	this.disX=e.clientX+scrollLeft-e.offsetX;
                this.dialogVisible = true;
                this.currentIndex = scope.$index;
                var that=this
                setTimeout(function(){
                	let dialog=that.$refs.perDialog;
                    dialog.style.left=that.disX-14+"px";
                	dialog.style.top=that.disY-100+"px";
                    dialog.style.opacity="1";
                    dialog.style.filter = "alpha(opacity=100%)";
                },0)
            },
            sureHandleDel(scope) {//确认删除
            	this.dialogVisible = false;
            	this.delShowQ=true;
                var typeName=this.tableData[this.currentIndex].type;
                var facebookId=this.tableData[this.currentIndex].id;
                if(typeName=="保存受众"){
                	var url="getDeleteSavedAudience";
                }else{
                	var url="getDeleteCustomAudience";
                }
                this.$store.dispatch(url,{
                	id:facebookId
                }).then(res=>{
            		if(res && res.data.success==true){
            			this.tableData.splice(this.currentIndex, 1);           			
            			this.getListAudience();
            			if(this.tableData.length==0){
            				this.showTable = false;
            				this.showTableEmpty=true;
            			}
            			this.showOrigin();
            			this.loadAll();
            			this.delShowQ=false;
                		Message.success('您已成功删除此受众！');
                	}else{
                		Message.error(res.data.message);
                	}
               }).catch((error) => {})	
            },
            clearContext(scope,e) {//点击X号
            	var input = this.getIpt(e,scope)
            	input.value="";
				this.clearContentFlag = true;
                input.focus();	            
            },
            newcreateAudience(){//创建受众
            	this.newcreate = false
            },
			submitUpload (formName) {//创建客户受众
				if(this.quickFlag){//避免快速点击创建多条
                    this.quickFlag=false;
					this.$refs[formName].validate((valid) => {
				        if(valid && this.uploadAlready) {
				            this.newcreateAudience();
				            this.nextC=true;
				            for(let i=0;i<this.tableData.length;i++){
								if (this.CruleForm.Cname.replace(/(^\s*)|(\s*$)/g, "")==this.tableData[i].name && this.tableData[i].type=="客户文件受众"){
									Message.error('已有相同受众名称，请修改')
									return ;
								}
							}
				            let file=this.$refs.userAvatar.files[0]  
			        	    let filename=this.$refs.userAvatar.files[0].name;
			        	    var reader = new FileReader()
			                reader.readAsDataURL(file)
			                var formData = new FormData()
			                formData.append('file',file)
                            formData.append('name',this.CruleForm.Cname.replace(/(^\s*)|(\s*$)/g, ""))
                            formData.append('userDateType',this.CruleForm.Cname1)

			          	    this.$store.dispatch("getCreateCustomAudience",formData)
								.then(res=>{
									if(res==false){
										this.nextC=false;
									}
									if(res.data.code==1){
										this.custom = false;
										this.getListAudience();
										this.showOrigin();
										this.loadAll();
										this.$refs[formName].resetFields();
										this.uploadAlready=false;
										this.$refs.userAvatar.value='';
										document.querySelector(".filename").innerHTML='';
										this.nextC=false;
										Message.success('您已成功创建一条客户受众');	
									}else if(res.data.code == -11) {    //链接					
                                        document.querySelector(".error-msg").innerHTML=res.data.message;
									    this.nextC=false;
									    this.$refs.userAvatar.value='';
										this.uploadAlready=false;
										document.querySelector(".filename").innerHTML='';
									}else {
                                        this.nextC=false;
									}
			        			})
								.catch((error) => {this.nextC=false;})
				        }else{
				        	if(document.querySelector(".filename").innerHTML==''){
				        		Message.warning("请选择文件");
				        	}
				            return false;
				        } 
				    });
				    setTimeout(()=>{
	            		this.quickFlag=true;
	            	},100)
				}
			},
			cancelCustomAudience(formName){
				this.nextC=false;
				this.custom=false;
				setTimeout(()=>{
					this.$refs[formName].resetFields();
					this.$refs.userAvatar.value='';
					document.querySelector(".filename").innerHTML=''
				},10)
                document.querySelector(".error-msg").innerHTML=''
			},
            formatTooltip (val) {//slider滑块
                return val / 1 + "K"
            },
            formatTooltip1 (val) {
                return val / 1 + "天"
            },
           	add0 (m){
            	return m<10?'0'+m:m
            },
            format(shijianchuo){//时间戳转换为日期
				var time = new Date(shijianchuo);
				var y = time.getFullYear();
				var m = time.getMonth()+1;
				var d = time.getDate();
				var h = time.getHours();
				var mm = time.getMinutes();
				var s = time.getSeconds();
				return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
			},
            ChineseTypeAudience(type){
                 if(type=="SAVED"){
                    type="保存受众"
                 }else if(type=="LOOKALIKE"){
                    type="类似受众"
                 }else if(type=="ENGAGEMENT"){
                    type="主页互动受众";
                 }else if(type=='CUSTOM'){
                    type="客户文件受众";
                 }
                 return type
            },
            change(valuesize1){//创建主页滑块的状态
            	if(valuesize1!=0){
            		this.mainSliderArd=true;	
            	}
            },
           	changePercent(valuesize){
           		if(valuesize!=0){
           			this.similarSliderArd=true;
           		}	
           	},
           	changeCountry(SruleForms1){
           		if(SruleForms1.length!=0){
           			this.cflag=false;
           			this.$refs.cflag.style="transition:all .3s;height :0;overflow:hidden"
           			document.querySelector(".contryList .el-input__inner").style="border-color:#bfcbd9"
           		}
           	},
           	getListAudience(){//获取受众列表
           		this.$store.dispatch("getListAudience").then(res=>{
           			if(res && res.data.success==true){
	           			var list=res.data.data;
	           			if(list.length>0){
			      		    for(let i=0,len=list.length;i<len;i++){
						    	list[i].flag=true;
						    	list[i].showType=false;
						    	list[i].gmtCreate=this.format(list[i].gmtCreate);
		                        list[i].type=this.ChineseTypeAudience(list[i].type);
		                        list[i].reach=this.toThousands(list[i].reach)        
		                        if(list[i].status=='EXIST'){
		                        	list[i].status='正常'
		                        }
		                        if(list[i].type=='主页互动受众' || list[i].type=='客户文件受众'){
		                        	list[i].showType=true;
		                        }
						    }
			      		    this.tableData=list;
			      		    this.showTable = true;
			      		    this.showTableEmpty = false;
			      		    this.allDataLength = this.tableData.length;
		                    this.val=this.val;                    
	      					this.tableDataUpdate();
		      		    }else{
		      		    	this.showTable = false;
			      		    this.showTableEmpty = true;
		      		    }
	      		    }else{
	      		    	this.showTableEmpty = true;
                        this.showTable = false;
	      		    	Message.error(res.data.message)
	      		    }
	    		}).catch((error) => {
                        this.showTableEmpty = true;
                        this.showTable = false;
                })
	    		
	    		  
           	},
           	getListPage(){//获取主页列表
           		this.$store.dispatch("getListPage").then(res=>{
           		    if(res && res.data.success==true){
	      				this.options1 = res.data.data;
	    				this.origin=this.origin.concat(res.data.data)
    				}
	    		}).catch((error) => {})	
           	},
           	saveCreatePageAudience(formName){//创建主页受众
           		if(this.quickFlag){//避免快速点击创建多条
                    this.quickFlag=false;
	            	this.$refs[formName].validate((valid) => {
					    if (valid && this.mainSliderArd) {
					  	    this.newcreateAudience();
					  	    this.nextM=true;
					  	    for(let i=0;i<this.tableData.length;i++){
								if (this.MruleForm.Mname.replace(/(^\s*)|(\s*$)/g, "")==this.tableData[i].name && this.tableData[i].type=="主页互动受众"){
									Message.error('已有相同受众名称')
									return ;
								}
							}
			            	this.$store.dispatch('getCreatePageAudience',{
			                	name:this.MruleForm.Mname.replace(/(^\s*)|(\s*$)/g, ""),
			                	objectId:this.MruleForm.Mname1,
			                	eventName:this.MruleForm.Mname2,
			                	retentionDays:this.valuesize1
			            	}).then(res=>{
			            		if(!res){this.nextM=false;}
			            		if(res.data.success==true){
			            			this.mainpage = false;
			            			this.mainSliderArd=false;
				            		this.$refs[formName].resetFields();
				            		this.valuesize1=0;
				            		this.getListAudience();
				            		this.showOrigin()//避免cancat带来地数组累加
				            		this.loadAll();//更新搜索受众名称
				            		Message.success('您已成功创建一条主页互动受众');
				            		this.nextM=false;
			            		}else{
			            			this.nextM=false;
			            		}
			            	}).catch((error) => {this.nextM=false;})	
					    }else {
					    	if(this.valuesize1==0){
			            		Message.warning('请选择过去(多少天)');
			                }					    	
					    	return false;
					    }
					})
	            	setTimeout(()=>{
	            		this.quickFlag=true;
	            	},100)
            	}
            	 
            },
            cancelMainAudience(formName){
            	this.nextM=false;
            	this.mainpage=false;
            	setTimeout(()=>{
            		this.$refs[formName].resetFields();
            		this.valuesize1=0
            	})
            },
           	getListLookAlikeLocation(){//获取地区列表
           		this.$store.dispatch("getListLookAlikeLocation").then(res=>{
           		    if(res.data.success==true){
           		       this.diqu=res.data.data;
           		    }
	    		}).catch((error) => {})	
           	},
            saveLookAlikeAudience(formName){//创建类似受众
            	var len=this.SruleForms1.length;
            	if(this.quickFlag){//避免快速点击创建多条
                    this.quickFlag=false;
	            	this.$refs[formName].validate((valid) => {
			          	if(valid && this.similarSliderArd &&len>0){
	                        this.nextS=true;
	                        this.newcreateAudience();
							let country=this.SruleForms1;
			                let indexId=this.SruleForm.Sname;
			                for(var i=0;i<this.origin.length;i++){
			                	if(this.origin[i].id==indexId){
			                		var item=this.origin[i];
			                	}
			                }
			                if(item){
			                    let type=item.type;
			                    let id=item.id;
			                    let name=item.name;
//			                    for(let i=0;i<this.tableData.length;i++){
//									if (name==this.tableData[i].name && this.tableData[i].type=="类似受众"){
//										
//										Message.error('已有相同受众名称，请修改')
//										return ;
//									}
//							    }
			                    if(type){
			                        this.$store.dispatch('getCreateLookAlikeAudience',JSON.stringify({
			                            name:name,
			                            originAudienceId:id,
			                            countries:country,
			                            specRatio:this.valuesize/100
			                        })).then(res=>{
			                        	if(!res){this.nextS=false;}
			                        	if(res.data.success==true){
			                        		this.similar=false;
				                        	this.$refs[formName].resetFields();
				                        	this.similarSliderArd=false;
				                        	this.valuesize=0;
				                        	this.SruleForms1=[];
				                            this.loadAll();
				                            this.getListAudience();
				                            this.nextS=false;
						            		Message.success('您已成功创建一条类似受众');
			                            }else{
			                            	this.nextS=false;
			                            }
			                        }).catch((error) => {this.nextS=false;})	                  
			                    }else{
			                        this.$store.dispatch('getCreateLookAlikeAudience',JSON.stringify({
			                            name:name,
			                            pageId:id,
			                            countries:country,
			                            specRatio:this.valuesize/100
			                        })).then(res=>{
			                        	if(!res){this.nextS=false;}
			                        	if(res.data.success==true){
			                        		this.similar=false;
				                        	this.$refs[formName].resetFields();
				                        	this.similarSliderArd=false;
				                        	this.valuesize=0;
				                            this.getListAudience();
				                            this.nextS=false;
						            		Message.success('您已成功创建一条类似受众');
					            		}else{
					            			this.nextS=false;
					            		}
			                        }).catch((error) => {this.nextS=false;})	
			                    }
			                } 
			            }else{
			            	if(len==0){
			            		this.$refs.cflag.style="transition:all .5s;height :20px;overflow:hidden"
			            		document.querySelector(".contryList .el-input__inner").style="border-color:red"
			            	}
			            	if(this.valuesize==0){
			            		Message.warning('请选择受众规模');
			            	}
			                return false;
			            }
			        });
			        setTimeout(()=>{
	            		this.quickFlag=true;
	            	},100)
			    }
            },
            cancelSimilarAudience(formName){
            	this.nextS=false;
            	this.similar = false;
            	setTimeout(()=>{
            		this.$refs[formName].resetFields();
            		this.valuesize=0;
            		this.cflag=false;
        		    this.SruleForms1=[];
        		    this.$refs.cflag.style="transition:all .3s;height :0;overflow:hidden"
            		document.querySelector(".contryList .el-input__inner").style="border-color:#bfcbd9"
            	})
            	
            },
            showDiv(item){
            	var num=this.toThousands(item.count)
          	    this.inputValue=num
          	    this.contry=item.name;
        		this.inputShow=true
            },
            getOriginList(){//自定义受众数据
	          	this.$store.dispatch("getListCustomAudience").then(res=>{
	          	    if(res.data.success==true){
		             	this.origin=this.origin.concat(res.data.data)
		            }
	          	}).catch((error) => {})
            },
            showOrigin(){//更新来源数据
            	this.origin=[];
            	this.getListPage();
            	this.getOriginList();
            },
            toThousands(num){//格式化数字
            	var num = (num || 0).toString(), result = '';  
			    while (num.length > 3) {  
			        result = ',' + num.slice(-3) + result;  
			        num = num.slice(0, num.length - 3);  
			    }  
			    if(num){
			    	result = num + result; 
			    }
			    return result;  
			}
        },
        computed: {
        	...mapGetters({
        		'audienceList':'getAdvAssetsAudienceList'
        	})
        },
        updated(){
			if(this.tableData.length==0){
				if(this.imgFlag=='contentNull'){}
				else if(this.imgFlag=='searchNull'){
					document.querySelector(".el-table__empty-block").style.cssText="height:500px;background:url("+require('../../assets/img/no-search-data.png')+") no-repeat center 30%;line-height:100%;background-size:100px 100px;"
				    document.querySelector(".el-table__empty-text").innerHTML="查询无结果"
				}
			}
        },
        mounted(){
            this.restaurants=this.loadAll();
        },
        components:{
        	loading
        },
        created(){
	      	this.getListPage();//获取主页列表  
	      	this.getListAudience();//获取受众列表
	    	this.getListLookAlikeLocation();//类似受众地区查询列表
	    	this.getOriginList()//来源
        }
    }
</script>
<style>
	#home .error-msg {font-size: 12px;color: #FF3526;word-wrap: break-word;}
	#home .error-msg a {color: #FF3526;}
	#home button i.el-icon-loading{position: relative;top: -4px !important;color: #FFFFFF !important;}
	#home{border: 0 !important;}
	#home .pagination{float: right; margin: 20px 0 40px 0;}
	#home .tableClass{position: relative;}
	#home .pagination{ float: right;margin: 20px 0 40px 0;}
	#home  .icon-action{color: #B0BEC5;cursor: pointer;margin: 0}
	#home  .empty-content1 {position: absolute;text-align: center;top: 50%;left: 50%;transform: translate(-50%, -50%)}
    #home  .empty-content1 img{ width: 100px;height: 100px;}        
    #home  .empty-content1 span{font-size: 13px;color: #0686F9;letter-spacing: 0; margin: 20px 0 0 -26px;display:inline-block;}        
    #home  .circle_ableBox{display: flex;position:relative}
    #home  .circle_ableText{display: inline-block;float: left;flex: 1;margin-left: 10px;}
    #home  .circle_able{display: inline-block;width:6px;height:6px;border-radius: 3px;margin-right:5px;position:absolute;float: left;top:9px}
    #home .el-table th >.cell, #home .el-table__header-wrapper thead div{font-size: 13px !important;}
    #home .el-table th >.cell{font-weight: 500 !important};
    #home {margin: 0 auto;border: 1px solid #eaeef0}
	#home th {background: #f0f5f8!important;font-weight: 100!important;font-size: 13px!important;}
	#home th div {background: #f0f5f8!important}
	#home thead,#home .el-table__header,.el-table__header-wrapper{width: 1200px !important;}
    #home thead tr{height: 44px !important;}
    #home .el-table__body-wrapper,.el-table__body-wrapper .el-table__body{width: 1200px !important;}
	#home tbody tr{height: 50px;line-height:100%;width: 1200px !important;}
	#home i {color: #b0bec5;margin: 0 5px}
	#home .el-table_1_column_2 span {color:#333333}
    
    #home .menu-wrapper{height: 50px;background:#FFFFFF;border-radius: 4px 4px 0 0;border:1px solid #EAEEF0;}
    #home .menu-wrapper .item{height: 47px;font-size: 16px;color: #666666;letter-spacing: 0;line-height: 50px;float: left;margin: 0 25px;cursor: pointer;}
    #home .menu-wrapper .item.active{font-family: STHeitiSC-Light;color: #0686F9;border-bottom: 3px solid #0686F9;}
    #home .able_redView{display: block;color:red;transform:scale(0.875);line-height:20px;display:inline-block;margin-top:-5px;}
    #home div.custom_new_create div.el-dialog__body div div.el-input{width:200px;}
 /*创建主页表单验证*/
    #home .el-form-item{height:49px;}
    #home .el-form-item__content {line-height:28px;}
	#home .demo-MruleForm .el-form-item{margin-bottom: 0;position: relative;}
	#home .demo-MruleForm .el-form-item .el-form-item__error{position:absolute;display: inline-block;width:200px;left: 290px;top:4px;margin-bottom: 0!important;}
    #home .demo-MruleForm .Mslider .el-form-item__error{position:absolute;display: inline-block;width:200px;left: 290px;top:24px;margin-bottom: 0!important;}
 /*创建客户受众验证*/	
    #home .demo-CruleForm .el-form-item{margin-bottom: 0;position: relative;}
    #home .demo-CruleForm .el-form-item .el-form-item__error{position:absolute;display: inline-block;width:200px;left: 290px;top:4px;margin-bottom: 0!important;}
    #home .demo-CruleForm .downloadModel .el-form-item__error{position:absolute;display: inline-block;width:200px;left: 290px;top:4px;margin-bottom: 0!important;}
    #home .demo-CruleForm .uploadText .filename{position:absolute;display: inline-block;width:300px;left:180px;top:0;margin-bottom: 0!important;text-overflow: ellipsis;}
 /*创建类似受众验证*/
    #home .demo-SruleForm .el-form-item__error1{position:absolute;display: inline-block;font-size:12px;color:#ff4949;left: 294px;top:4px;margin-bottom: 0!important;transition:all .5s;height :0px;overflow:hidden }
    #home .demo-SruleForm .el-form-item{margin-bottom: 0;position: relative;}
    #home .demo-SruleForm .el-form-item  .el-form-item__error{position:absolute;display: inline-block;width:200px;left: 295px;top:4px;margin-bottom: 0!important;}	
	#home .demo-SruleForm .Slider{margin-top: 21px;}
	#home .demo-SruleForm .Slider .el-form-item__error{position:absolute;display: inline-block;width:200px;left: 295px;top:40px;margin-bottom: 0!important;}
	
	#home .tableData .handleDel{display: inline-block;line-height:13px;}
	#home .tableData .input_text{position: relative;}
	#home .tableData .input_text .el-input__inner{padding-right: 30px;}
	#home .tableData .el-icon-close{position: absolute;}
    #home .customName1>span{display:inline-block;float:left} 
    #home .customType1>span{display:inline-block;float:left}
    #home .customName1>.el-input{margin-left:10px}
    #home .customType1>.el-select{margin-left:10px}
    #home .customModel{position:relative;}
    #home .customModel>span{display:inline-block;float:left}
    #home .customModel>a{display:inline-block;float:left}
    #home .dialog_text>span:nth-child(1){display:inline-block;margin-left:27px}
    #home .dialog_namePage>span{display:inline-block;float:left}
    #home .dialog_namePage>.el-input{margin-left:10px}

    #home>.headEdit{height:80px;background: #FFFFFF;}
	#home>.headEdit>.btnleft{width:120px;height:34px;background:#ffb100;border-radius:100px;outline:none;border:0;margin-left:23px;margin-top:23px;float:left}
    #home>.headEdit>.el-autocomplete{width: 320px;margin-left: 15px;float:left;margin-top:22px}
	#home>.headEdit>.el-button i.icon-audience{color: #FFFFFF;}
	#home .el-table__body-wrapper .el-icon-delete{padding: 0;margin:0}
	#home .el-table__body-wrapper .el-icon-edit{padding: 0;margin:0 5px 0 0}

	#home .dialog-wrapper-messageBox{position: fixed;top: 0;right: 0;bottom: 0;left: 0;overflow: auto;margin: 0;background:rgba(0,0,0,.5) ;z-index: 2000;}
	#home .el-dialog-messageBox{width:213px;height:90px;position:absolute;border:1px solid #ccc;box-shadow: 0 1px 3px rgba(0,0,0,.3);box-sizing: border-box;z-index:2003;background: #fff;opacity: 0;filter:alpha(opacity=0);}
	#home .el-dialog-messageBox .dialog-body{height:40px;padding:0 20px;line-height: 40px;}
	#home .el-dialog-messageBox .dialog-body .el-icon-warning{color:#feb100;margin:0 9px 0 0}
	#home .el-dialog-messageBox .dialog-footer{height:22px;width:120px;margin-top:14px;margin-left:80px}
	#home .el-dialog-messageBox .dialog-footer button{min-width:50px;height:22px;background:#feb100;position: relative;border-radius: 8px;color:#fff;border-color:#feb100;}
	#home .el-dialog-messageBox .dialog-footer button:nth-child(1){background:#fff;color:#6a6a6a;border-color:#d6dfe4;}
	#home .el-dialog-messageBox .dialog-footer button:nth-child(1):hover{background:#eaeef0;}
	#home .el-dialog-messageBox .dialog-footer button:nth-child(2):hover{background:#e59e00}
	#home .headEdit>button:hover{background:#e59e00}
	#home .el-dialog-messageBox .dialog-footer button span{position: absolute;left:8px;top:3px}
	#home .arrow-down{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #FFFFFF;position: absolute;bottom:-5px;left:20px;}

	#home .el-table__empty-text{position: absolute;left: 50%;top:50%;transform: translate(-60%,-50%);}

	#home .Audience>div.el-dialog{width:520px;}
	#home .Audience>div.el-dialog div.el-dialog__header{border-bottom:1px solid #eaeef1;height:20px;}
	/*#home .Audience>div.el-dialog div.el-dialog__body{height:170px}*/
	#home div.newcreate div.el-dialog__body div{text-align:center}
	#home div.newcreate div.el-dialog__body div button{background:#fff;height:34px;border-color:#d6dfe4;color:#6a6a6a;width:160px;border-radius:17px;margin-top:16px}
	#home div.newcreate div.el-dialog__body div button:hover{background:#EAEEF0;}
	#home div.newcreate div.el-dialog__footer span button{width:64px;height:28px;background:#feb100;border-radius:14px;color:#fff;border-color:#feb100;}
	#home div.newcreate div.el-dialog__footer span button:hover{background:#e59e00;}
	#home .Audience>div.el-dialog div.el-dialog__footer span button span{display:inline-block;height:10px;position: relative;top:-4px}
	#home .Audience>div.el-dialog div.el-dialog__footer{border-top:1px solid #eaeef1}

	#home div.custom_new_create .ui_button{display:inline-block;width:70px;height:26px;border:1px solid #d6dfe4;line-height:26px;border-radius:5px;text-align:center;margin-left: 10px;color:#989898;font-size:12px;}
	#home div.custom_new_create div.el-dialog{width:520px!important;}
	#home div.custom_new_create div.el-dialog__body div div input{height:28px;}
	#home div.custom_new_create div.el-dialog__body .a{color:#989898;font-size:12px;width:68px;height:28px;display: inline-block;border: 1px solid #d6dfe4;border-radius: 5px;line-height: 28px;text-align: center;margin-left:11px}
	
	#home .uploadUserAvatar{position:absolute;clip:rect(0 0 0 0)}
	#home .filename{display:inline-block;width:300px;overflow: hidden;position: relative;top:4px}
	
	#home div.custom_new_create div.el-dialog__body ul.el-upload-list {position: relative;top:-38px;width:300px;left:100px;}
	#home div.custom_new_create div.el-dialog__footer span button{min-width:64px !important;height:28px;background:#feb100;border-radius:14px;color:#fff;border-color:#feb100;}
	#home div.custom_new_create div.el-dialog__footer span button:nth-child(1){background:#fff;color:#6a6a6a;border-color:#d6dfe4;}
	#home div.custom_new_create div.el-dialog__footer span button:nth-child(1):hover{background:#eaeef0;}
	#home div.custom_new_create div.el-dialog__footer span button:nth-child(2):hover{background:#e59e00;}
	#home div.similar div.el-dialog__body div:nth-child(4) div.slider_parent{width:320px;float:right;position:relative;margin-right: 80px;top:8px}
    #home div.similar div.el-dialog__body div:nth-child(4) div.slider_parent .el-slider{height:28px;line-height: 28px;position: relative;top:-11px}

	#home .demo-SruleForm .el-dialog{height: auto !important;}
	#home .demo-SruleForm .el-dialog__body{height:auto !important;}
    #home .demo-SruleForm .contryList>.el-form-item{height:auto;}
    #home .demo-SruleForm .el-dialog__footer{height:50px !important;}
    #home .demo-SruleForm .el-dialog .contryList .el-select{min-height:28px !important;height:auto;}
    #home .demo-SruleForm .el-dialog .contryList .el-input{min-height:28px !important;height:auto;}
    #home .demo-SruleForm .el-dialog input{min-height:28px !important}
	#home div.similar div.el-dialog__body div.el-select:nth-child(2){margin-bottom:21px}
	#home div.similar div.el-dialog__body>div:nth-child(3){height:50px}
	#home div.similar div.el-dialog__body div:nth-child(3) div.slider_parent{width:75%;float:right;position:relative;top:8px}
	#home div.similar div.el-dialog__body div:nth-child(3) div.el-slider{width:215px;margin:-10px 0 0 -35px}
	#home div.similar div.el-dialog__body div:nth-child(3) div.slider_parent ul{position:absolute;display:flex;flex-direction:row;list-style:none;width:220px;top:10px;margin-left:-30px;}
	#home div.similar div.el-dialog__body div.slider_parent ul li:nth-child(1){position:relative}
	#home div.similar div.el-dialog__body div.slider_parent ul li:nth-child(1) span{position:absolute;left:-7px}
	#home div.similar div.el-dialog__body div.slider_parent ul li:last-child {margin-left:5px;}
	#home div.similar div.el-dialog__body div.slider_parent ul li{flex:1;text-align:right}
	#home div.similar div.el-dialog__body .slider_parent .el-slider__bar{background: #fccfcc;}
	#home div.similar div.el-dialog__body .el-slider__button.el-tooltip{background: #fff;width:9px;height:9px;border:3px solid #fccfcc;}
	#home div.similar div.el-dialog__body .percent{display: inline-block;position: absolute;left: 340px;color: #aaaaaa;top:3px}
    #home .demo-MruleForm .el-dialog__footer{padding: 0 !important;}
    #home .demo-MruleForm .el-dialog__footer .el-form-item__content{height: 100%; padding:12px 20px 0 0;}
    #home .circleType{display:inline-block;width: 6px;height: 6px;background:#666;border-radius: 3px;position: relative;top: -1px;left:3px;margin-right:6px ;}
</style>
